<template>
  <!--折线图-->
  <div
    :style="{width:width,height:height}"
  ></div>
</template>

<script>
  export default {
    name: 'BarChart',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '330px'
      },
      /**
       * @param:
       *    dataLine  --> 折线的数据
       *    dataY  --> Y轴的数据
       * @date 2020/08/23
       * @author ZhuHongWei
       */
      chartData: {
        type: Object,
        default: () =>{}
      },
      barColor: {
        type: String,
        default: '#58A3F7'
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    watch: {
      chartData: {
        deep: true,
        handler: function() {
          this.initChart()
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart() {
        this.chart = this.$echarts.init(this.$el)
        this.chart.clear()
        let option = {
          tooltip: {
            trigger: "item",
            formatter:function(val){
              return `${val.name}: ${val.value}台`
            },
          },
          grid: {
            left: '8%',
            right: '8%',
            bottom: '30%',
            top: '20%'
          },
          title: {
            show: true,
            text: this.title,
            textStyle: {
              color: '#ffffff',
              fontStyle: 'normal',
              fontWeight:'normal',
              fontSize: '12',
            },
            bottom: 0,
            right: 0
          },
          yAxis: [
            {
              show : false,
              boundaryGap: true,
              type: "value",
              nameTextStyle: {
                color: '#111111'
              },
              axisLine:{       //y轴
                show:false
              },
              axisTick:{       //y轴刻度线
                show:false
              },
              splitLine: {     //网格线
                show: false,
                lineStyle:{
                  color: '#eeeeee'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#aaaaaa'
                },
              },
              minInterval: 1
            }
          ],
          xAxis: [
            {
              show : false,
              type: "category",
              splitLine: {
                show: false
              },
              axisTick:{       //y轴刻度线
                show:false
              },
              axisLine:{       //y轴
                show: false
              },
              axisLabel: {
                textStyle: {
                  color: '#aaaaaa'
                },
              },
              data: this.chartData.dataY,
            }
          ],
          series: [{
            name: '探针总量',
            type: 'bar',
            barMaxWidth: '40',
            itemStyle: {
              normal: {
                color: this.barColor,
                label: {
                  show: false,
                  textStyle: {
                    color: '#aaaaaa'
                  },
                  formatter:function(val){
                    return `${val.value}台`
                  },
                  position: 'top'
                },
              }
            },
            lineStyle: {
              normal: {
                color: '#58A3F7' // 线条颜色
              }
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#ffffff'
              }
            },
            data: this.chartData.dataLine,
          }]
        }
        this.chart.setOption(option)
      }
    }
  }
</script>

<style scoped>
</style>
